<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/appointmentList'">
            <div class="vs-search-box">
                <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="姓名：">
                        <el-input style="width:250px" v-model="paging.name" placeholder="请输入姓名" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input style="width:250px" v-model="paging.phone" placeholder="请输入手机号" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="会员卡号">
                        <el-input style="width:250px" v-model="paging.vip_number" placeholder="请输入会员卡号" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="项目名称：">
                        <el-select style="width:250px" filterable clearable v-model="paging.project_id"
                            placeholder="请选择">
                            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约状态：">
                        <el-select style="width:250px" clearable v-model="paging.status" placeholder="请选择">
                            <el-option label="取消预约" value="0"> </el-option>
                            <el-option label="待到店" value="1"> </el-option>
                            <el-option label="确认到店" value="2"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预计到店时间：">
                        <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                            style="width:250px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        <el-button @click="reset(1)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button @click="utils.goUrl('/appointments?title=add')" type="primary">新增预约</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%">
                    <el-table-column width="70px" label="序号" type="index" align="center"></el-table-column>
                    <el-table-column prop="reserve_number" label="预约编号" align="center" min-width="140"
                        show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="user.vip_no" label="会员卡号" align="center" min-width="80"
                        show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="name" label="姓名" align="center" min-width="80" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center" min-width="110">
                        <!-- <template slot-scope="scope">
                        <div v-if="scope.row.phone">
                            {{scope.row.phone | rtPhone}}
                        </div>
                    </template> -->
                    </el-table-column>
                    <el-table-column prop="number" label="预约人数" align="center"> </el-table-column>
                    <el-table-column prop="project.name" label="项目名称" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-for="(ele, index1) in scope.row.project" :key="index1">
                                <span v-if="index1 != 0">、</span>{{ ele.project.name }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderTime" label="预计到店时间" align="center" min-width="160">
                        <template slot-scope="scope">
                            {{ scope.row.date }} {{ scope.row.time }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="预约状态" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.status | reserveStatus }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="提交时间" align="center" min-width="160"> </el-table-column>
                    <el-table-column fixed="right" width="155" label="操作" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1" @click="setRow(3, scope.row)"
                                class="tab-table-text">修改</span>
                            <span v-if="scope.row.status == 1" @click="setRow(2, scope.row)" class="tab-lv-text">处理</span>
                            <span @click="setRow(1, scope.row)" class="tab-huang-text">详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]">
                    </el-pagination>
                </div>
            </div>
            <el-dialog title="预约处理" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
                <div class="dialog_body">
                    <div class="dialog_center">
                        <el-radio v-model="form.status" label="0">取消预约</el-radio>
                        <el-radio v-model="form.status" label="2">确认到店</el-radio>
                    </div>
                    <div class="dialog_bdy">
                        <el-alert v-if="form.status == 0" show-icon title="注：点击“取消预约”后，此预约单将变更为已取消，之后不可再更改状态"
                            type="warning"></el-alert>
                        <el-alert v-else show-icon title="注：点击“确认到店”后，此预约单将变更为已完成，之后不可再更改状态" type="warning"></el-alert>
                        <div v-if="form.status == 0">
                            <el-input type="textarea" v-model="form.cancel" :rows="4" placeholder="取消原因："></el-input>
                        </div>
                    </div>

                </div>
                <div slot="footer">
                    <el-button @click="handleClose()">取 消</el-button>
                    <el-button type="primary" :loading="isBtn" @click="handleReserve()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    filters: {
        rtPhone(val) {
            if (val && val.length == 11) {
                let val2 = val.toString()
                let num1 = val2.substring(0, 3)
                let num2 = val2.substring(7, 11)
                return `${num1}****${num2}`
            }
            return val
        }
    },
    data() {
        return {
            loading: false,
            dialogVisible: false,
            isBtn: false,
            projectList: [],
            bill_time_start: [],
            paging: {
                name: '', //姓名
                phone: '',
                page: 1,
                total: 0,
                limit: 100,
                project_id: '',
                vip_number: '',
                status: ''
            },
            projects: {},
            form: {
                id: "",
                status: '0',
                cancel: '',
            },
            radio: false,
            textarea: '',
            tableData: []
        };
    },
    created() {
        if (this.$route.path == '/appointmentList') {
            let { status } = this.$route.query;
            if (status) {
                this.paging.status = status;
            }
            this.handleCurrentChange(1);
            this.getProject();
        }
    },
    methods: {
        async getProject() {
            let { code, data } = await this.$Http.getProject({ is_all: 1 })
            if (code) {
                this.projectList = data
            }
        },
        async setRow(type, row) {
            if (type == 1) { //详情
                this.utils.goUrl('/appointmentInfo?type=1&id=' + row.id)
            } else if (type == 2) { //处理
                this.dialogVisible = true;
                this.projects = row;
                this.form.id = row.id;
            } else if (type == 3) { //修改
                this.utils.goUrl('/appointmentInfo?type=3&id=' + row.id)
            }
        },
        async handleReserve() {
            if (!this.form.cancel && this.form.status == 0) return this.$message.error('请输入取消原因');
            this.isBtn = true;
            let { code, data } = await this.$Http.handleReserve(this.form);
            this.isBtn = false;
            if (code) {
                this.$message.success('操作成功!')
                if (this.form.status == 2) {
                    // 跳转前台收银
                    let projectList = this.projects?.project?.map((v) => v
                    );
                    console.log(projectList, 'projectList');
                    this.$router.push({
                        name: "cashier",
                        query: { user_id: this.projects?.user?.id },
                        params: { projectList: projectList },
                    });
                    return
                }
                this.repairGetList();
                this.handleClose();
            }
        },
        handleClose(dom) {
            this.form = this.$options.data().form;
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            if (!this.bill_time_start) {
                this.bill_time_start = []
            }
            this.paging.date_start = this.bill_time_start[0] || ''
            this.paging.date_end = this.bill_time_start[1] || ''
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let {
                code,
                data
            } = await this.$Http.getReserve(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() { //重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.dialog_body {
    display: flex;
    flex-direction: column;

    .dialog_center {
        text-align: center;
    }

    .dialog_bdy {
        margin: 20px 20px;

        >div {
            margin: 10px 0;
        }
    }
}
</style>
